<template>
  <div class="zoushitu_box">
    <van-tabs v-model="active">
      <van-tab title="开奖">
        <ul class="kaijiang_ul">
          <li class="kaijiang_li" v-for="(item,index) in daqilist" :key="index">
            <div class="kaijiang_li_top">
              <span>第{{item.nper}}期</span>
              <span>{{item.created_at}}</span>
            </div>
            <div class="kaijiang_li_count">
              <span
                class="kaijiang_li_qiu"
                v-for="(itemm,index) in item.winning_num"
                :key="index"
              >{{itemm}}</span>
            </div>
            <div class="kaijiang_li_bottom">
              <span>总和：{{item.sum}}</span>
              <span>大小：{{item.size}}</span>
              <span>单双：{{item.oddeven}}</span>
            </div>
          </li>
        </ul>
      </van-tab>
      <van-tab title="万位走势">
        <winning :info="ten_thousands"></winning>
      </van-tab>
      <van-tab title="千位走势">
        <winning :info="thousands"></winning>
      </van-tab>
      <van-tab title="百位走势">
        <winning :info="hundreds"></winning>
      </van-tab>
      <van-tab title="十位走势">
        <winning :info="tens"></winning>
      </van-tab>
      <van-tab title="个位走势">
        <winning :info="units"></winning>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
//开奖组件
import Winning from "./components/Winning";
export default {
  components: {
    Winning
  },
  data() {
    return {
      active: 0, //默认选中第一个
      daqilist: [], //每一大期
      ten_thousands: {}, //万
      thousands: {}, //千
      hundreds: {},
      tens: {},
      units: {}
    };
  },
  // 渲染之前
  created() {
    // 这是开奖请求
    this.http
      .get("/api/winning/number")
      .then(res => {
        // console.log(res.data.data)
        if (res.status_code) {
          this.daqilist = res.data.data;
          res.data.data.forEach(item => {
            item.winning_num = item.winning_num.split(",");
          });
        
        } else {
           this.$toast(res.message);
        }
      })
    // 走势图
    // 这是位置走势图请求
    this.http
      .get("/api/chart/data")
      .then(res => {
        console.log(res.data.ten_thousands);
        if (res.status_code == 200) {
          this.ten_thousands = res.data.ten_thousands; //万
          this.thousands = res.data.thousands; //千
          this.hundreds = res.data.hundreds; //百
          this.tens = res.data.tens; //十
          this.units = res.data.units; //个
        } else {
           this.$toast(res.message);
        }
      })
  }
};
</script>

<style>
@import url("../../assets/css/ttcp/chongzhi.css");
.zoushitu_box {
  background-color: #f2f2f2;
  height: 100vh;
}
/*vant未选中*/

.zoushitu_box .van-tab {
  color: #333333;
}
/*vant未选中*/

.zoushitu_box .van-tab--active {
  color: #d31d17;
}
.meiqi_li_left2 {
  line-height: 0.3rem;
  padding: 0.28rem 0;
}
</style>